<template>
  <a-drawer v-model:visible="LAYER.visible" :title="LAYER.title" :width="LAYER.width"
            :closable="LAYER.closable" :mask-closable="LAYER.maskClosable" :esc-to-close="LAYER.escToClose"
            :unmount-on-close="LAYER.unmountOnClose" :footer="LAYER.footer" :ok-text="LAYER.okText"
            :ok-loading="LAYER.okLoading" :cancel-text="LAYER.cancelText" :on-before-ok="onSubmit" @close="onCancel">
    <!--表单开始-->
    <a-form ref="formRef" :model="formState" layout="vertical" :rules="DICT_EDIT.RULES">
      <a-row :gutter="12">
        <a-col :span="12">
          <a-form-item label="字典代码" field="code">
            <a-input v-model="formState.code" allow-clear placeholder="请填写字典代码" :disabled="isUpdate"/>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="字典名称" field="title">
            <a-input v-model="formState.title" allow-clear placeholder="请填写字典名称"/>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="字典状态" field="state">
            <smart-dict v-model="formState.state" :url="DictOptions.DictState" is-radio/>

          </a-form-item>
        </a-col>

        <a-col :span="24">
          <a-form-item label="字典描述" field="description">
            <a-textarea v-model="formState.description" placeholder="请填写字典描述" allow-clear
                        :auto-size="{ minRows: 2, maxRows: 5 }"/>
          </a-form-item>
        </a-col>


        <a-col :span="24">

          <a-form-item label="字典明细" field="items">

            <div class="form-item-custom">
              <div class="btn-container">
                <a-button size="small" type="primary" @click="itemCtr.open()"> 新增字典项</a-button>
              </div>
              <div class="main-container">
                <a-table :columns="DICT_ITEM_COLUMNS" :data="formState.items" :bordered="false">

                  <template #label="{record}">
                    <span v-if=" record.theme ==='text' ">{{ record.label }}</span>
                    <a-tag v-else-if="record.theme==='default'">{{ record.label }}</a-tag>
                    <a-tag v-else :color="record.theme">{{ record.label }}</a-tag>
                  </template>

                  <template #action="{  record, rowIndex }">
                    <a-link @click="itemCtr.open(record)">修改</a-link>
                    <a-link status="danger" @click="removeItem(rowIndex)">删除</a-link>
                  </template>
                </a-table>


              </div>
            </div>


          </a-form-item>


        </a-col>
      </a-row>


    </a-form>
    <item-modal v-if="itemCtr.show" :record="itemCtr.record" @close="itemCtr.close"/>
    <!--表单结束-->
  </a-drawer>
</template>

<script lang="ts" setup>
import {reactive} from 'vue'
import {EditDrawer} from '@/libs/core'
import {DictOptions} from '@/libs/options'
import {DICT_EDIT} from "../resource/form";
import {SystemHttp} from '../resource/http'
import {DICT_ITEM_COLUMNS} from '../resource/colums'
import {EmptyUtil, MsgUtil} from "@/utils";
import ItemModal from "./item_modal.vue";

const props = defineProps({record: {type: Object, required: true}})
const emit = defineEmits(['cancel'])

const {addDict, updateDict} = SystemHttp
const config = {tplRecord: DICT_EDIT.BODY, rawRecord: props.record, rowKey: 'id', emit}

const service = new EditDrawer(config).setAddRequest(addDict).setUpdateRequest(updateDict)
const {formRef, formState, LAYER, isUpdate, onCancel, onSubmit} = service
LAYER.title = isUpdate ? '修改字典' : '新建字典'

const itemCtr = reactive({
  show: false,
  record: {},
  isAdd: true,
  open: (obj = {}) => {
    itemCtr.record = obj
    itemCtr.isAdd = EmptyUtil.isEmptyObject(obj)
    itemCtr.show = true
  },
  close: data => {
    if (EmptyUtil.isNotEmptyObject(data)) {
      const index = formState.value.items.findIndex(item => item.value === data.value)
      if (itemCtr.isAdd && index >= 0) {
        MsgUtil.notify("添加失败", "已存在相同的选项值", 'error')
        itemCtr.record = {}
        itemCtr.show = false
        return
      }
      if (index < 0) formState.value.items.push(data)
      else formState.value.items[index] = data

    }
    itemCtr.record = {}
    itemCtr.show = false
  },
})

// 删除明细项数据
const removeItem = index => formState.value.items.splice(index, 1)
</script>
